<template>
	<view class="cart">
		<text class="edit" @click="isedit = !isedit" v-if="!isedit">编辑</text>
		<text class="edit" @click="isedit = !isedit" v-else> 取消</text>
		<view class="cartlist">
			<view class="list-item" v-for="(item,index) in goods" :key='item.id'>
				<label>
					<checkbox @click="checkboxChange(item)" :checked="item.checked" />
				</label>
				<image :src="getimg(item.goods_info.logo_url)" mode=""></image>
				<view class="info">
					<view class="title">
						<text class="name">{{item.goods_info.name}}</text>
					</view>
					<view class="tips">
						规格：{{item.goods_info.unit}}
					</view>
					<view class="vipprice">
						<text class="vipnum" v-if="isvip">￥{{item.goods_info.price}}</text>
						<text class="vipnum" v-else>￥{{item.goods_info.vip_price}}</text>
						<view class="add-cut">
							<text @click="cut(item)">-</text>
							<input class="num" type="number" @blur="changeNum(item)" v-model="item.num" />
							<text @click="add(item)">+</text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="allprice" v-if="!isedit">
			<label for="allprice-ch">
				<checkbox id="allprice-ch" @click="changecheckbox" :checked="allcheck" /><text>全选</text>
			</label>
			<view class="allprice-text">
				<view class="total">
					总计：<text>￥{{total_price}}</text>
				</view>
				<view class="set" @click="toFound">
					结算({{goodsnums}})
				</view>
			</view>
		</view>
		<view class="allprice" v-else>
			<view></view>
			<view class="allprice-text">
				<view class="total">

				</view>
				<view class="set delete" @click="DelCart">
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		UserCart,
		OrderFound,
		DelCart,
		UpdateCart
	} from '../../api/api.js'
	export default {
		data() {
			return {
				isactive: true,
				num: 1,
				goodsnums: 0,
				allcheck: false,
				isedit: false,
				goods: [],
				isvip: true,
				cart: '',
				DelCartList: [],
				loading: false
			}
		},
		onLoad() {
			this.UserCart()
		},
		onShow() {
			this.cart = ''
			this.UserCart()
			this.allcheck = false
			this.isedit = false
			this.goodsnums = 0
		},
		computed: {
			total_price() {
				let total_price = 0;
				this.goods.map(e => {
					if (this.isvip) {
						e.checked ? total_price += e.goods_info.price * e.num : total_price += 0;
					} else {
						e.checked ? total_price += e.goods_info.vip_price * e.num : total_price += 0;
					}

				})
				return total_price;
			}
		},
		methods: {
			DelCart() {
				this.DelCartList = []
				this.goods.map(e => {
					e.checked ? this.DelCartList.push(e.id) : '';
				})
				DelCart({
					cart_id_array: this.DelCartList
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.UserCart()
					this.isedit = false
				})
			},
			toFound() {
				if (this.cart == '') {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/orderfound/index?type=1&cart=' + this.cart
					})
				}

			},
			getimg(url) {
				return this.websiteUrl + url
			},
			UserCart() {
				UserCart().then(res => {
					this.goods = res.data.list
					if (res.data.level > 1) {
						this.isvip = false
					} else {
						this.isvip = true
					}
				})
			},
			// 全选
			changecheckbox() {
				this.allcheck = !this.allcheck
				if (this.allcheck) {
					this.goodsnums = this.goods.length
					this.goods.map(item => {
						item.checked = true
						this.cart = this.cart + item.id + ','
					})
				} else {
					this.goodsnums = 0
					this.goods.map(item => {
						item.checked = false
					})
				}
			},
			// 单选
			checkboxChange(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.goodsnums = this.goodsnums - 1
					this.allcheck = false
				} else {
					this.goodsnums = this.goodsnums + 1
					this.cart = this.cart + item.id + ','
					console.log(this.cart)
					const a = this.goods.every(item => {
						return item.checked === true
					})
					if (a) {
						this.allcheck = true
					} else {
						this.allcheck = false
					}
				}
			},
			UpdateCart(item, num) {
				if (this.loading) {
					return
				}
				this.loading = true
				UpdateCart({
					id: item.id,
					num
				}).then(res => {
					this.loading = false
					if (res.status == 1) {
						item.num = num
					} else {
						uni.showToast({
							title: res.message,
							icon: none
						})
					}
				})
			},
			changeNum(item) {
				this.UpdateCart(item.id, item.num)
			},
			cut(item) {
				if (item.num > 1) {
					let num = Number(item.num) - 1
					this.UpdateCart(item, num)
				}
			},
			add(item) {
				if (item.num < 99) {
					let num = Number(item.num) + 1
					this.UpdateCart(item, num)
				}
			}
		}
	}
</script>

<style lang="scss">
	.cart {
		background-color: #FAFAFA;

		.edit {
			position: fixed;
			z-index: 999;
			color: #fff;
			right: 8%;
			top: 10px;
			font-size: 16px;
		}

		.cartlist {
			margin-bottom: 140rpx;
		}

		.list-item {
			display: flex;
			align-items: center;
			background: #fff;
			margin: 20px auto;
			padding: 2% 4%;
			width: 86%;
			border-radius: 10px;

			image {
				width: 90px;
				height: 90px;
			}

			.info {
				flex: 1;
				padding: 0 3%;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name {
						font-size: 15px;
						font-weight: bold;
					}

					.price {
						color: #DAB483;
						font-size: 20px;
					}
				}

				.tips {
					color: #999999;
					font-size: 14px;
					margin: 20rpx 0;
				}

				.vipprice {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.vipnum {
						color: #555555;
						font-size: 12px;
					}
				}

				.add-cut {
					display: flex;
					align-items: center;

					.num {
						width: 35px;
						display: block;
						// text-align: center;
						// border: 1px solid #e4e4e4;
						// border-radius: 5px;
						margin: 0 10px;
						font-size: 14px;
						color: #777;
						text-align: center;
						border-bottom: 1px solid #ccc;
					}

				}
			}
		}

		.allprice {
			display: flex;
			background: #fff;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: 50px;
			width: 95%;
			padding: 2% 0;
			padding-left: 5%;
			font-size: 16px;

			.allprice-text {
				display: flex;
				align-items: center;

				.total {
					font-size: 14px;

				}
			}

			.set {
				background: linear-gradient(180deg, #d6ae7b, #eacda3);
				color: #fff;
				padding: 2% 0;
				width: 90px;
				text-align: center;
				font-size: 16px;
				line-height: 35px;
				height: 35px;
				border-radius: 20px;
				margin: 0 20px;
			}

			.delete {
				background: #ff0303;
			}
		}
	}
</style>